<!DOCTYPE html>
<html lang="en">
<head>
    <title>boxcontainer</title>
    <link rel="stylesheet" href="/fonts/iconfont.css">
    <link rel='stylesheet' href='/stylesheets/boxcontainer.css'/>
    <script src="/javascripts/jquery-1.11.3.js"></script>
    <script src="/javascripts/dragParent.js"></script>
    <script>
    let dragged_list = JSON.parse(localStorage.getItem('dragged_list')) || []

    function handleDrop(data) {
      let index = dragged_list.length
      dragged_list.push({index, data})
      dragged_list.forEach((item, index) => {
        $('.layout0 iframe')[index].src = dragged_list[index].data.modulePath
        $('.layout0 .dragged_item').eq(index).show()
      })
      localStorage.setItem('dragged_list', JSON.stringify(dragged_list))
    }

    function handleClose(index) {
      console.log(index)
    }

    window.addEventListener('message', function (e) {
      console.log(e, '模块1')
    });
    $(function () {
      dragParent.initParent('drag_parent', handleDrop)
    })
    </script>
    <script>
    function resetBox() {
      localStorage.clear()
      location.reload()
    }

    function layoutCtrl(type) {
      screenW = $(window).width()
      screenH = $(window).height()
      $('.drag_content').hide()
      $('.dragged_item').hide()
      if (type === 0) {
        $('.layout0').show()
        if (dragged_list.length) {
          $('.layout0 .dragged_item').show()
        }
        dragged_list.forEach((item, index) => {
          $('.layout0 iframe')[index].src = dragged_list[index].data.modulePath
        })
        localStorage.setItem('layout_type', '0')
      }
      if (type === 1) {
        $('.layout1').show()
        if (dragged_list.length) {
          $('.layout1 .dragged_item').show()
        }
        $('.layout1 .layout_section').css('height', (screenH - 1) / 2)
        $('.layout1 .dragged_item').eq(0).css('width', (screenW - 18) / 2)
        $('.layout1 .dragged_item').eq(0).css('height', (screenH - 1) / 2)
        $('.layout1 .dragged_item').eq(1).css('width', (screenW - 18) / 2)
        $('.layout1 .dragged_item').eq(1).css('height', (screenH - 1) / 2)
        $('.layout1 .line_col').css('left', (screenW - 18) / 2 - 2)
        $('.layout1 .line_col').css('height', (screenH - 1) / 2 - 2)
        $('.layout1 .line_row').css('top', (screenH - 1) / 2 - 2)
        $('.layout1 .line').show()
        dragged_list.forEach((item, index) => {
          $('.layout1 iframe')[index].src = dragged_list[index].data.modulePath
        })

        localStorage.setItem('layout_type', '1')
      }
      if (type === 2) {
        $('.layout2').show()
        if (dragged_list.length) {
          $('.layout2 .dragged_item').show()
        }
        $('.layout2 .layout_section').css('width', (screenW - 18) / 2)
        $('.layout2 .layout_section').css('height', '100%')
        $('.layout2 .dragged_item').eq(0).css('height', (screenH - 1) / 2)
        $('.layout2 .dragged_item').eq(1).css('height', (screenH - 1) / 2)
        $('.layout2 .line_col').css('left', (screenW - 18) / 2 - 2)
        $('.layout2 .line_row').css('top', (screenH - 1) / 2 - 2)
        $('.layout2 .line_row').css('width', (screenW - 18) / 2 - 2)
        $('.layout2 .line').show()
        dragged_list.forEach((item, index) => {
          $('.layout2 iframe')[index].src = dragged_list[index].data.modulePath
        })

        localStorage.setItem('layout_type', '2')
      }
    }

    let screenW = 0
    let screenH = 0

    $(function () {
      let layout_type = localStorage.getItem('layout_type') || '0'
      layoutCtrl(Number(layout_type))

      $('.layout_btn').click(function () {
        $('.layout_command').toggle()
        $('.layout_btn').toggleClass('expand')
      })

      $('.layout_command li').click(function () {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active')
          //清除布局
          layoutCtrl(0)
        } else {
          $('.layout_command li').removeClass('active')
          $(this).addClass('active')
          // 按选择情况控制布局
          if ($('.layout_command li').index(this) === 0) {
            // 布局1
            layoutCtrl(1)
          } else if ($('.layout_command li').index(this) === 1) {
            // 布局2
            layoutCtrl(2)
          }
        }
        $('.layout_btn').removeClass('expand')
        $('.layout_command').hide()
      })
    })
    </script>
</head>
<body class="drag_parent">
<div class="layout_btn">
    <i class="iconfont icon-buju"></i>
</div>
<ul class="layout_command">
    <li><img src="/images/layout01.jpg" alt=""></li>
    <li><img src="/images/layout02.jpg" alt=""></li>
    <li onclick="resetBox()">重置</li>
</ul>
<div class="drag_content layout0">
    <div class="dragged_item">
        <iframe frameborder="0" style="width: 100%;height: 100%"></iframe>
    </div>
    <div class="dragged_item">
        <iframe frameborder="0" style="width: 100%;height: 100%"></iframe>
    </div>
    <div class="dragged_item">
        <iframe frameborder="0" style="width: 100%;height: 100%"></iframe>
    </div>
</div>
<div class="drag_content layout1" style="display: none">
    <div class="layout_section">
        <div class="dragged_item">
            <iframe frameborder="0" style="width: 100%;height: 100%"></iframe>
        </div>
        <div class="line line_col"></div>
        <div class="dragged_item">
            <iframe frameborder="0" style="width: 100%;height: 100%"></iframe>
        </div>
    </div>
    <div class="line line_row"></div>
    <div class="layout_section">
        <div class="dragged_item">
            <iframe frameborder="0" style="width: 100%;height: 100%"></iframe>
        </div>
    </div>
</div>
<div class="drag_content layout2" style="display: none">
    <div class="layout_section">
        <div class="dragged_item">
            <iframe frameborder="0" style="width: 100%;height: 100%"></iframe>
        </div>
        <div class="line line_row"></div>
        <div class="dragged_item">
            <iframe frameborder="0" style="width: 100%;height: 100%"></iframe>
        </div>
    </div>
    <div class="line line_col"></div>
    <div class="layout_section">
        <div class="dragged_item">
            <iframe frameborder="0" style="width: 100%;height: 100%"></iframe>
        </div>
    </div>
</div>
</body>
</html>
